<div class="layui-fluid"  lay-title="模板管理" id="app-vue">

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <form class="layui-form layui-card-header layuiadmin-card-header-auto" >
                    <div class="layui-form-item  layui-col-space10">
                        <div class="layui-inline nepadmin-mar-l10">
                            <el-button size="small" type="primary"  @click="handleCreate({})">文件处理</el-button>
                        </div>

                    </div>
                </form>
                <div class="layui-card-body nepadmin-pad-l10 nepadmin-pad-r10">
                    <el-table :data="tableData" v-loading="table_loading" border stripe >


                        <el-table-column label="发布的url" prop="url" show-overflow-tooltip width="400">
                            <template slot-scope="scope">
                                <el-link :href="scope.row.url" target="_blank">{{scope.row.url}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column label="模板的url" prop="temp_url" show-overflow-tooltip width="400">
                            <template slot-scope="scope">
                                <el-link :href="scope.row.temp_url" target="_blank">{{scope.row.temp_url}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column label="path" prop="path" show-overflow-tooltip width="250"> </el-table-column>

                        <el-table-column label="更新日期" prop="update_time" align="center" width="150"> </el-table-column>

                        <el-table-column label="操作"  fixed="right" align="center" min-width="200">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="handleCreateContent( scope.row)">正式内容</el-button>
                                <el-button size="mini" type="warning"  @click="handleCreateContent( scope.row,'temp')">模板内容</el-button>
                                <el-button size="mini" type="danger"  @click="handleRelease(scope.row)">模板发布</el-button>
                            </template>
                        </el-table-column>
                    </el-table>


                </div>
            </div>
        </div>

    </div>

    <create-template ref="createTemplate"/>
    <create-template-content ref="createTemplateContent"/>
</div>
<script>
    layui.extend({
        createTemplate: 'views/web/components/createTemplate',
        createTemplateContent: 'views/web/components/createTemplateContent',
    }).use(['admin','conf','jquery','view','createTemplate','createTemplateContent'], function (admin,conf,$,view,createTemplate,createTemplateContent) {


        var app = new Vue({
            el: '#app-vue',
            data: {
                table_loading:false,
                tableData:[],
                listQuery:{}
            },
            components:{
                'create-template' : createTemplate,
                'create-template-content' : createTemplateContent,
            },
            created:function() {
                this._initData()
            },
            methods: {
                _initData:function(){
                    let that = this
                    that.table_loading = false
                    admin.post({
                        url:'/admin/web/template'
                        ,data:this.listQuery
                        ,success: function (res) {
                            that.table_loading = false
                            var data = res.data || {}
                            that.tableData = data.list || []
                            that.total = data.total || 0
                        }
                        ,complete:function(){
                            console.log('complete')
                            that.table_loading = false
                        }
                    })
                },
                handleCreate:function(item) {
                    this.$refs['createTemplate'].showDialog(item,this)

                },
                handleCreateContent:function(item,mode) {
                    this.$refs['createTemplateContent'].showDialog(item,mode,this)

                },
                handleRelease:function(item){
                    var that = this;
                    this.$confirm("发布将模板内容覆盖正式内容", '提示', { type: 'error' }).then(function(v){
                        admin.post({
                            url:'/admin/web/templateRelease'
                            ,data: {path:item.path,tempPath:item.tempPath}
                            ,success: function (res) {
                                const data = res.data||{}
                                that.$message({ message: res.msg, type: 'success' });
                            }
                        })
                    }).catch(function(v) {
                        console.log('cancel',v)
                    })
                },

            }
        })

    })
</script>